<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- meta使用viewport以确保页面可自由缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>记账页面</title>
		<link rel="stylesheet" href="css/weui.min.css">
		<link rel="stylesheet" href="css/jquery-weui.min.css" />
		<link rel="stylesheet" href="css/add.css">
		<style type="text/css">

		</style>
		<!-- 图标 -->
		<script src="//at.alicdn.com/t/font_748398_ozk4d5k332j.js"></script>
		<!--LOGO-->
		<script src="//at.alicdn.com/t/font_756404_3wfwbvrruoy.js"></script>
	</head>

	<body>
		<div class="header weui-flex">
			<div id="btn-back" class="title-icon-box" onClick="javaScript:history.go(-1)">
				<svg class="icon title-icon" aria-hidden="true">
					<use xlink:href="#icon-fanhui"></use>
				</svg>
			</div>
			<div class="my-flex"></div>
			<div class="title-box">
				<a class="btn-title left" href="javascript:void(0);" onclick="titleAction(0,true)">收入</a>
				<a class="btn-title middle action" href="javascript:void(0);" onclick="titleAction(1,true)">支出</a>
				<a class="btn-title right" href="javascript:void(0);" onclick="titleAction(2,true)">转账</a>
			</div>
			<div class="my-flex"></div>
			<div class="title-icon-box" onclick="submit()">
				<svg class="icon title-icon" aria-hidden="true">
					<use xlink:href="#icon-gou"></use>
				</svg>
			</div>
		</div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide ">
					<!-- 收入 -->
					<div id="i-box" class="main-expenditure pull-box">
						<!-- 头部 -->
						<div class="main-title show-model">
							<div id="i-color-box"  class="tag-icon-box">
								<svg class="icon title-icon" aria-hidden="true">
									<use id="i-icon-box" xlink:href="#icon-gift_icon"></use>
								</svg>
							</div>
							<label id="i-title-box">收入</label>
							<!-- 占位 -->
							<div class="my-flex"></div>
							<div class="title-text-box">
								<!-- class="title-text-one" -->
								<!-- 两个ID -->
								<div class="add-num" >0.00</div>
								<div class="title-text-twe add-text" style="display: none;"></div>
							</div>
						</div>
						<!-- 占位置 -->
						<div style="width: 100%;height: 50px;"></div>
					</div>
				</div>
				<div class="swiper-slide">
					<div id="o-box" class="main-expenditure pull-box">
						<!-- 支出 -->
						<!-- 头部 -->
						<div class="main-title show-model">
							<div id="o-color-box" class="tag-icon-box">
								<svg class="icon title-icon" aria-hidden="true">
									<use id="o-icon-box" xlink:href="#icon-gift_icon"></use>
								</svg>
							</div>
							<label id="o-title-box">支出</label>
							<!-- 占位 -->
							<div class="my-flex"></div>
							<div class="title-text-box">
								<!-- class="title-text-one" -->
								<div class="add-num">0.00</div>
								<div class="add-text title-text-twe" style="display: none;"></div>
							</div>
						</div>
						<!-- 占位置 -->
						<div style="width: 100%;height: 50px;"></div>
						
						<!--<div class="tag-add">
							<label class="tag-text">
								<div class="tag-icon-box">
									<svg class="icon title-icon" aria-hidden="true">
										<use xlink:href="#icon-jiahao"></use>
									</svg>
								</div>
								<label>编辑</label>
							</label>
						</div>-->
						
					</div>
				</div>
				<div class="swiper-slide">
					<div class="transfer">
						<div class="weui-flex show-model">
							<div class="left my-flex">转出账户</div>
							<div class="add-num right">0.00</div>
						</div>
						<div class="line-icon-box">
							<label>
								<div class="logo-box">
									<svg class="icon title-icon" aria-hidden="true">
										<use xlink:href="#icon-xiajiantou"></use>
									</svg>
								</div>
							</label>
						</div>
						<div class="weui-flex show-model">
							<div class="left my-flex">转入账户</div>
							<div class="add-num right">0.00</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--<div class="remark-model" style="">
			<div style="padding: 15px 15px 0 15px;background-color: #FFF;height: 170px;">
				<p style="color: #636163;">备注</p>
				<textarea id="remark" style="margin-top: 5px;width: 100%;height: 120px; max-height: 120px; border-color: #F7CF84;resize:none;"></textarea>
			</div>
			<div style="background-color: #FFF;height: 45px;display: flex;border-top: 1px solid #E1E1E1;top: -1px;position: relative;">
				<div style="flex: 3;"></div>
				<div style="flex: 1;background: #5279EF;color: #FFF;line-height: 45px;text-align: center;font-size: 16px;">确定</div>
			</div>
		</div>-->

		<div class="model" style="display: none;">
			<div class="model-top weui-flex">
				<label><input type="text" id='datetime-picker' value=""/></label>
				<label>现金</label>
				<div class="my-flex"></div>
				<label class="btn-remark text-remark" style="display: none;"></label>
				<div class="model-top-icon btn-remark icon-remark">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-bianji"></use>
					</svg>
				</div>
			</div>
			<div class="model-main">
				<div class="item weui-flex">
					<a action="7" class="my-flex">7</a>
					<a action="8" class="my-flex">8</a>
					<a action="9" class="my-flex">9</a>
					<a action="b" class="my-flex icon-box">
						<svg class="icon title-icon" aria-hidden="true">
							<use xlink:href="#icon-shanchuqingkong"></use>
						</svg>
					</a>
				</div>
				<div class="item weui-flex">
					<a action="4" class="my-flex">4</a>
					<a action="5" class="my-flex">5</a>
					<a action="6" class="my-flex">6</a>
					<a action="+" class="my-flex">+</a>
				</div>
				<div class="item weui-flex">
					<a action="1" class="my-flex">1</a>
					<a action="2" class="my-flex">2</a>
					<a action="3" class="my-flex">3</a>
					<a action="-" class="my-flex">-</a>
				</div>
				<div class="item weui-flex">
					<a action="c" class="my-flex">C</a>
					<a action="0" class="my-flex">0</a>
					<a action="." class="my-flex">.</a>
					<a id="btn-submit" action="ok" class="my-flex">确定</a>
				</div>
			</div>
		</div>

		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/jquery.swipe.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="js/city-picker.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/layer.js"></script>
		<script src="js/api.js"></script>
		<script>
			var mSwiper; //滑动组件
			var mLayerRemark = null;
			var isFloat = false;
			var isModelShow = false;
			var isModelChangeOver = true;
			var userId = null;
			var id;
			var itemObj = {
				date_time : getNowForPicker()
			}

			var touchObj = {};
			
			var numObjListDom = {
				isSum:false,
				index:null,
				list:[],
				operator:[],
				init:function(num){
					if(!!num){
						var obj = createNumObj(num);
						this.isSum = false;
						this.index = 0;
						this.list = [];
						this.list.push(obj);
						this.operator = [];
					}else{
						this.isSum = false;
						this.index = 0;
						this.list = [];
						this.list.push(createNumObj());
						this.operator = [];
					}
				},
				add:function(){
					this.isSum = true;
					this.list.push(createNumObj());
					this.index ++;
				},
				get:function(){
					var result = '';
					for (var i = 0; i < this.list.length; i++) {
						result += Number(this.list[i].getNum());
						if(i < this.list.length - 1){
							result += this.operator[i]
						}
					}
					return result;
				},
				getNum:function(){
					var num = 0;
					for (var i = 0; i < this.list.length; i++) {
						if(i == 0) num += Number(this.list[i].getNum());
						else{
							if(this.operator[i-1] == '+'){
								num += Number(this.list[i].getNum());
							}else{
								num -= Number(this.list[i].getNum());
							}
						}
					}
					//控制量程 最大值
					return num.toFixed(2) > 9999999.99 ? 9999999.99:num.toFixed(2);
				}
			};
			
			var editHtml = `<div class="tag-add">
							<label class="tag-text">
								<div class="tag-icon-box">
									<svg class="icon title-icon" aria-hidden="true">
										<use xlink:href="#icon-jiahao"></use>
									</svg>
								</div>
								<label>编辑</label>
							</label>
						</div>`
			
		
			
			$(function() {
				userId = API.getStorage("user");
				if(!userId){
					//检验是否登录
					window.location.href = 'login.html?error=1';
					return;
				}
				
				$.showLoading("加载中...");
				//默认当前时间
				id = getUrlParam('id');
				if(!!id){
					API.getItemById(id,function(data){
						if(data.code == 0 && data.data.length == 1){
							var obj = data.data[0];
							$("#datetime-picker").val(obj.date_time.substr(0,16));
							$("#datetime-picker").datetimePicker();
							numObjListDom.init(obj.money.toFixed(2));
							$('.add-num').html(obj.money.toFixed(2));
							switch(obj.type){
								case 0:
									$('#i-icon-box').attr('xlink:href',obj.icon);
									$('#i-color-box').css('background-color',obj.color);
									$('#i-title-box').html(obj.title);
									break;
								case 1:
									$('#o-icon-box').attr('xlink:href',obj.icon);
									$('#o-color-box').css('background-color',obj.color);
									$('#o-title-box').html(obj.title);
									break;
							}
							$('.text-remark').html(obj.remark);
						}else{
							alert(data.msg);
						}
					});
				}else{
					$("#datetime-picker").val(itemObj.date_time);
					$("#datetime-picker").datetimePicker();
				}
				
				API.getTag(userId,function(data){
					if(data.code == 0){
						var list = data.data;
						for(var i = 0; i<list.length;i++){
							if(list[i].type == 0){
								$('#i-box').append(getItemDom(list[i]));
							}else{
								$('#o-box').append(getItemDom(list[i]));
							}
						}
					}
					
					$('#i-box').append(editHtml);
					$('#o-box').append(editHtml);
					
					$('.tag-add').click(function(){
						window.location.href = 'tag_list.html?type='+mSwiper.activeIndex;
					});
					
					$.hideLoading();
					
					$('#o-box .tag-item').click(function(){
						var color = $(this).attr('e-color');
						var title = $(this).attr('e-title');
						var icon = $(this).attr('e-icon');
						$('#o-icon-box').attr('xlink:href',icon);
						$('#o-color-box').css('background-color',color);
						$('#o-color-box').addClass('action');
						setTimeout(function(){
							$('#o-color-box').removeClass('action');
						},200)
						$('#o-title-box').html(title);
					});
					
					$('#i-box .tag-item').click(function(){
						var color = $(this).attr('e-color');
						var title = $(this).attr('e-title');
						var icon = $(this).attr('e-icon');
						$('#i-icon-box').attr('xlink:href',icon);
						$('#i-color-box').css('background-color',color);
						$('#i-color-box').addClass('action');
						setTimeout(function(){
							$('#i-color-box').removeClass('action');
						},200)
						$('#i-title-box').html(title);
					});
					if(!id){
						$('#i-box .tag-item').eq(0).click();
						$('#o-box .tag-item').eq(0).click();
					}
				});
				numObjListDom.init();
				mSwiper = new Swiper('.swiper-container', {
					initialSlide: 1,
					pagination: {
						el: '.swiper-pagination',
						type: 'progressbar',
					}
				});

				mSwiper.on('transitionEnd', function() {
					titleAction(mSwiper.activeIndex, false);
				});

				$('.show-model').click(function() {
					if(isModelChangeOver && !isModelShow){
						isModelChangeOver = false;
						$('.model').slideDown(200,function(){
							isModelChangeOver = true;
							isModelShow = true;
						});
					}
				});
				
				$('.btn-remark').click(function(){
					mLayerRemark = layer.open({
					    type: 1
					    ,content:   `<div style="padding: 15px 15px 0 15px;background-color: #FFF;height: 180px;">
										<p style="color: #636163;">备注</p>
										<textarea id="remark" style="color: #636163;line-height: 1.3;font-size: 15px;margin-top: 5px;width: 100%;height: 130px; max-height: 130px; border-color: #F7CF84;resize:none;"></textarea>
									</div>
									<div style="background-color: #FFF;height: 45px;display: flex;border-top: 1px solid #E1E1E1;top: -1px;position: relative;">
										<div style="flex: 3;"></div>
										<div onClick="closeRemarkBox()" style="flex: 1;background: #5279EF;color: #FFF;line-height: 45px;text-align: center;font-size: 16px;">确定</div>
									</div>`
					    ,anim: 'up'
					    ,shade: false //不显示遮罩 跟日期同步
					    ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 240px; padding-top:10px; border:none;'
					});
					var remark = $('.text-remark').html();
					$('#remark').val(remark);
				})

				$('.model-main .item>a').click(function() {
					if(!mSwiper) return;
					switch(mSwiper.activeIndex) {
						case 0: //收入
							BtnClick(this,'.add-text','.add-num');
							break;
						case 1: //支出
							BtnClick(this,'.add-text','.add-num');
							break;
						case 2: //转账
							BtnClick(this,'.add-text','.add-num');
							break;
					}
				});
				
				
			});
			
			function createNumObj(str){
				var obj = {
					isFloat:false,
					numLength:0,
					maxNumLength:7,
					floatLength:0,
					maxFloatLength:2,
					list:[],
					init:function(){
						this.isFloat = false;
						this.numLength = 0;
						this.floatLength = 0;
						this.list = [];
					},
					getNum:function() {
						var num = "";
						var k = -1;
						var length = this.list.length;
						if(length == 0){
							return '0.00'
						}
						for (var i = 0; i < this.list.length; i++) {
							if(i == 0 && this.list[i] == '.') {
								num += '0';
								length++;
							}
							num += this.list[i];
							if(this.list[i] == '.') k = i;
						}
						if(k == -1) return num+".00";
						else if(this.list.length - k == 3) return num;
						else if(this.list.length - k == 2) return num+"0"
						else if(this.list.length - k == 1) return num+"00"
						
					},
					put:function(val){
						if(isRealNum(val)){
							if(!this.isFloat){ //整数
								if(this.numLength < this.maxNumLength){
									if(this.list.length == 0 && val == '0') {
										return;
									}
									this.numLength ++;
									this.list.push(val);
								}
							}else{ //小数
								if(this.floatLength < this.maxFloatLength){
									this.floatLength ++;
									this.list.push(val);
								}
							}
						}else{
							if(val == '.' && !this.isFloat) {
								this.isFloat = true;
								this.list.push('.');
							}
						}
					},
					back:function(){
						if(!this.isFloat){ //整数
							this.list.splice(this.list.length-1,1);
							this.numLength --;
							if(this.numLength < 0) this.numLength = 0;
						}else{ //小数
							switch(this.floatLength){
								case 0:
									this.isFloat = false;
									this.list.splice(this.list.length-1,1);
									this.list.splice(this.list.length-1,1);
									this.numLength --;
									this.floatLength --;
									if(this.floatLength < 0) this.floatLength = 0;
									break;
								case 1:
								case 2:
									this.list.splice(this.list.length-1,1);
									this.floatLength --;
									break;
							}
						}
					}
				};
				if(!!str){
					var arr = splitArr(str+"");
					for (var i = 0; i < arr.length; i++) {
						obj.put(arr[i]);
					}
				}
				
				return obj;
			}
			
			function getItemDom(obj){
				var html = '<div class="tag-item" e-color='+ obj.color +' e-icon='+ obj.icon +' e-title='+ obj.title +'>\
							<label class="tag-text">\
								<div class="tag-icon-box" style="background-color: '+ obj.color +';">\
									<svg class="icon title-icon" aria-hidden="true">\
										<use xlink:href="'+ obj.icon +'"></use>\
									</svg>\
								</div>\
								<label>' + obj.title + '</label>\
							</label>\
						</div>';
				return html;
			}
			
			function closeRemarkBox(){
				var remark = $('#remark').val();//备注内容
				if(!!remark){
					$('.text-remark').show();
					$('.text-remark').html(remark);
					$('.icon-remark').hide();
				}else{
					$('.text-remark').hide();
					$('.icon-remark').show();
				}
				if(!!mLayerRemark || mLayerRemark == 0) {
					layer.close(mLayerRemark);
					mLayerRemark = null;
				}
			}
			
			function BtnClick(btn,textdom,numdom){
				var num = $(numdom).html();
				var btnVal = $(btn).attr('action');
				if(isRealNum(btnVal) || btnVal == '.') {
					numObjListDom.list[numObjListDom.index].put(btnVal);
					$(textdom).html(numObjListDom.get());
				};
				if(btnVal == 'c'){
					numObjListDom.init();
				}
				if(btnVal == 'b'){
					numObjListDom.list[numObjListDom.index].back();
					$(textdom).html(numObjListDom.get());
				}
				//数字显示变化
				$(numdom).html(numObjListDom.getNum());
				
				if(btnVal == '+' || btnVal == '-'){
					numObjListDom.add();
					numObjListDom.operator.push(btnVal);
					$('#btn-submit').html('=')
					$(numdom).addClass('title-text-one');
					$(textdom).html(numObjListDom.get());
					$(textdom).show();
				}
				
				if(btnVal == 'ok'){
					num = numObjListDom.getNum();
					if(numObjListDom.isSum){
						//点击计算
						numObjListDom.isSum = false;
						$(numdom).removeClass('title-text-one');
						$(textdom).html('');
						$(numdom).html(num);
						$(textdom).hide();
						$('#btn-submit').html('确定')
						numObjListDom.init(num);
					}else{
						//提交
						submit();
					}
				}
			}
			//提交表单
			function submit(){
				var money = numObjListDom.getNum();
				if(money == '0.00') {
					$.alert('请输入金额');
					return;
				}
				API.showLoading('提交中...')
				switch(mSwiper.activeIndex){
					case 0:
						itemObj.icon = $('#i-icon-box').attr('xlink:href');
						itemObj.color = $('#i-color-box').css('background-color');
						itemObj.title = $('#i-title-box').html();
						itemObj.type = 0;
						break;
					case 1:
						itemObj.icon = $('#o-icon-box').attr('xlink:href');
						itemObj.color = $('#o-color-box').css('background-color');
						itemObj.title = $('#o-title-box').html();
						itemObj.type = 1;
						break;
					case 2:
						itemObj.icon = '';
						itemObj.color = '';
						itemObj.title = '';
						itemObj.type = 2;
						break;
				}
				itemObj.money = money;
				var dateTime = $("#datetime-picker").val()+":00"
				itemObj.date_time = dateTime;
				itemObj.remark = $('.text-remark').html() == null ? '':$('.text-remark').html();
				itemObj.year = dateTime.substr(0,4);
				itemObj.month = dateTime.substr(5,2);
				itemObj.day = dateTime.substr(8,2);
				itemObj.user = userId;
				itemObj.data_num = dateTime.replace('-','').replace('-','').replace(' ','').replace(':','').replace(':','');
				API.addItem(itemObj,function(){
					API.hideLoading();
					window.location.href = 'index.html?success=1';
				});
			}
			

			function titleAction(type, flag) {
				//type 0收入 1支出 2转账
				//flag true全变化 false是按钮变化
				$('.btn-title').removeClass('action');
				switch(type) {
					case 0:
						$('.btn-title.left').addClass('action');
						break;
					case 1:
						$('.btn-title.middle').addClass('action');
						break;
					case 2:
						$('.btn-title.right').addClass('action');
						break;
				}
				if(flag && !!mSwiper) mSwiper.slideTo(type);
			}

			//触摸事件绑定
			$('.swiper-slide').on("touchstart", function(e) {
				var p = getTouchPosition(e);
				touchObj.start = p;
				touchObj.diffX = touchObj.diffY = 0;
			}).on("touchmove", function(e) {
				//防止滑动
				if(document.getElementsByClassName("pull-box")[mSwiper.activeIndex].scrollTop <= 0){
					var p = getTouchPosition(e);
					touchObj.diffX = p.x - touchObj.start.x;
					touchObj.diffY = p.y - touchObj.start.y;
					if(Math.abs(touchObj.diffX) > Math.abs(touchObj.diffY)) return true; // 说明是左右方向的拖动
					if(touchObj.diffY  >　0){
						e.preventDefault();
						e.stopPropagation();
					}
				}
				var p = getTouchPosition(e);
				touchObj.diffX = p.x - touchObj.start.x;
				touchObj.diffY = p.y - touchObj.start.y;
				if(Math.abs(touchObj.diffX) > Math.abs(touchObj.diffY)) return true; // 说明是左右方向的拖动
				if(touchObj.diffY < 0) {
					touchObj.diffY = 0 - (Math.pow(-touchObj.diffY, 0.75));
				} else {
					touchObj.diffY = Math.pow(touchObj.diffY, 0.75);
				}
				//放到松手后再加载动画变化 试试是否会流畅点
			}).on("touchend", function(e) {
				//放到松手后再加载动画变化 试试是否会流畅点
				if(mLayerRemark != null || $('.picker-items').length > 0) return;
				if(touchObj.diffY < 0 ) {
					//隐藏
					if(isModelChangeOver && isModelShow){
						isModelChangeOver = false;
						$('.model').slideUp(200,function(){
							isModelChangeOver = true;
							isModelShow = false;
						});
					}
				} else {
					//显示
					if(isModelChangeOver && !isModelShow){
						isModelChangeOver = false;
						$('.model').slideDown(200,function(){
							isModelChangeOver = true;
							isModelShow = true;
						});
					}
				}
			});
			
			
		</script>
	</body>

</html>